
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>Title</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <i-button  type="primary" icon="ios-add-circle" @click="handleAdd">增加</i-button>

    <i-table :columns="columns1" :data="mydata2" border :show-summary="true">

    </i-table>
</div>
<script>
    new Vue({
        el:"#root",
        mounted(){
            _this=this;
            this.searchGoodsList();
        },
        data:{
            goodsList:[],
            $isEdit:[],
            columns1:[
                {
                    title: '商品编号',
                    key: 'goodsId',
                    align:"center",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('Input', {
                                props: {
                                    type: "number",
                                    value: params.row.goodsId=_this.mydata2[params.index].goodsId,
                                    readonly:"true"
                                },
                                on: {
                                    "on-blur": event => {
                                        params.row.goodsId = event.target.value;
                                        _this.mydata2[params.index].goodsId = event.target.value;
                                        _this.$set(params.row, '$isEdit', false);
                                    },

                                }
                            });
                        } else  {
                            return h('div', {
                                on: {
                                    click: () => {
                                        _this.$set(params.row, '$isEdit', true);
                                    },
                                }
                            },params.row.goodsId);
                        }
                    }
                },
                {
                    title: '商品名称',
                    key: 'goodsName',
                    align:"center",
                    render: (h, params) => {
                        return h('i-select', {
                                filterable:true,
                                on: {
                                    'on-change':(event) => {
                                       _this.mydata2[params.index].goodsName = event
                                       _this.mydata2[params.index].goodsId = event
                                        _this.mydata2[params.index].price=_this.goodsList[event].sellingPrice
                                    },
                                },
                            },
                            _this.goodsList.map(function(type){//这个数组需要在data中定义,里面是一个个对象,每个对象里面应当包含value属性(因为要用到)
                                return h('Option', {
                                    props:{
                                        value:type.id,
                                        label:type.name,
                                        filterable:true,
                                    }
                                }, type);
                            })
                        )
                    }},
                {
                    title: "价格(元)",
                    key: "price",
                    align:"center",
                   render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('Input', {
                                props: {
                                    type: "number",
                                    value: params.row.price=_this.mydata2[params.index].price,
                                    readonly:"true"
                                },
                                on: {
                                    "on-blur": event => {
                                        params.row.price = event.target.value;
                                        _this.mydata2[params.index].price = event.target.value;
                                        _this.$set(params.row, '$isEdit', false);
                                    },

                                }
                            });
                        } else  {
                            return h('div', {
                                on: {
                                    click: () => {
                                        _this.$set(params.row, '$isEdit', true);
                                    },
                                }
                            },params.row.price);
                        }
                    }
                },
                {
                    title: '数量',
                    key: 'num',
                    align:"center",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('Input', {
                                props: {
                                    type: "number",
                                    value: params.row.num
                                },
                                on: {
                                    "on-blur": event => {
                                        params.row.num = event.target.value;
                                        _this.mydata2[params.index].num = event.target.value;
                                        _this.$set(params.row, '$isEdit', false);
                                    },

                                }
                            });

                        } else  {
                            return h('div', {
                                on: {
                                    click: () => {
                                        _this.$set(params.row, '$isEdit', true);
                                    },
                                }
                            },params.row.num);
                        }

                    },
                },
                {
                    title: "金额(元)",
                    key: "money",
                    align:"center",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h('Input', {
                                props: {
                                    type: "number",
                                    value: params.row.money=params.row.num*params.row.price,
                                    readonly:"true"
                                },
                                on: {
                                    "on-blur": event => {
                                        params.row.money = event.target.value;
                                        _this.mydata2[params.index].money = event.target.value;
                                        _this.$set(params.row, '$isEdit', false);
                                    },

                                }
                            });

                        } else  {
                            return h('div', {
                                on: {
                                    click: () => {
                                        _this.$set(params.row, '$isEdit', true);
                                    },
                                }
                            },params.row.money=params.row.num*params.row.price);
                        }

                    },
                },
       {
           title: "操作",
           key: "action",
           align:"center",
           render: (h, params) => {
               return h('div', [
                   h('i-Button', {
                       props: {
                           type: 'error',
                           size: 'small'
                       },
                       on: {
                           "click": (index, row) => {
                               _this.mydata2.splice(index, 1)                                    }
                       }
                   }, '删除'),
                   h('i-Button', {
                       props: {
                           type: 'info',
                           size: 'small'
                       },
                       on: {
                           click: () => {
                               if (params.row.$isEdit) {
                                   _this.handleSave(params.row)
                               } else {
                                   _this.handleEdit(params.row)
                               }
                           }
                       }
                   }, params.row.$isEdit ? '保存' : '编辑'),

               ])
       }},
                ],
            mydata2:[]
        },
        methods:{
        searchGoodsList(){
            axios.get(`${ctx}/jibenxinxi/sp/list`)
                .then(({data})=>{
                    this.goodsList=data.result;
                });
        },
            handleAdd() {
                let row = {
                    num:"0",
                    money:"0",
                }
                this.mydata2.push(row)
            },
            handleDelete(index, row) {
                this.mydata2.splice(index, 1)
            },
            handleEdit (row) {
                this.$set(row, '$isEdit', true)

            },
            handleSave (row) {
                this.$set(row, '$isEdit', false)
            },
        }
    })
</script>
</body>
</html>
